<template>
  <!-- 雷达图 -->
  <div class="chart-module">
    <slot></slot>
    <div class="chart-module-hd drag-tongs">
      <div class="title">
        <router-link :to="'/make/' + id" v-if="place === 'dashboard'">{{ title }}</router-link>
        <template v-else>{{ title }}</template>
      </div>
      <a-tooltip v-if="describe">
        <template #title>{{ describe }}</template>
        <InfoCircleOutlined class="describe" />
      </a-tooltip>
    </div>
    <div class="chart-module-centent" :id="id"></div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import { globalConfig, field } from './common/pubConfig';
  import { Radar } from '@antv/g2plot';
  import mixin from './common/mixin';
  import { transformData } from '@/constants/initDefaultData';
  import HtmlTemplate from './common/html.vue';
  import { InfoCircleOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    components: { InfoCircleOutlined },
    mixins: [mixin],

    props: {},

    data() {
      return {};
    },

    created() {},

    methods: {
      /**
       * 渲染图表
       */
      $render() {
        this.chartObj = new Radar(this.id, {
          ...globalConfig(),
          ...field(),
          data: transformData(this.showData),
          ...this.chart.config,
        });
        this.chartObj.render();
      },
    },
  });
</script>
<style lang="scss"></style>
